<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>分类列表详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/search.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav header-top">
			<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<!--搜索框-->
			<form action="" method="get" id="search">
				<div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear" placeholder="请输入搜索关键字">
				</div>
			</form>

			<button class="mui-icon mui-pull-right" id="submit">搜索</button>
		</header>
		
		<div class="mui-content">
			
			<!--选项卡-->
			<div class="mui-segmented-control control">
				<a class="mui-control-item mui-active" href="#">综合</a>
				<a class="mui-control-item" href="#">热销</a>
				<a class="mui-control-item price" href="#">
					价格
					<i class="iconfont icon-unfold"></i>
				</a>
			</div>
			<div class="mui-slider">
				<div class="mui-slider-group">
					<!--第一个内容区容器-->
					<div class="mui-slider-item">
						<!--商品列表-->
						<article class='goods'>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
						</article>
					</div>
					<!--第二个内容区-->
					<div class="mui-slider-item">
						<!--商品列表-->
						<article class='goods'>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
						</article>
					</div>
					<!--第三个内容区-->
					<div class="mui-slider-item">
						<!--商品列表-->
						<article class='goods price_cate'>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
							<div>
								<a href="goods_detail.html">
									<div><img src="img/1547826906a.jpg" alt="" /></div>
									<aside>
										<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
										<p>￥585.00</p>
									</aside>
								</a>
							</div>
						</article>
					</div>
				</div>
			</div>
		</div>
		
		
		
		

		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()

			let price_ctl = false		//true代表价格递增，false代表价格递减
			/*****	 点击切换页面	******/
			mui('.mui-segmented-control').on('tap','.mui-control-item',e=>{
				mui('.mui-slider').slider().gotoItem($(e.target).index())
				if($(e.target).index()==2){
						
						$.ajax({
							type:"get",
							url:"test_data/goods1.json",
							async:true,
							success(data){
								if(price_ctl){
									$('.iconfont').removeClass('icon-unfold').addClass('icon-fold')
									price_ctl = false
									let html =''
									$.each(data, (i,v)=>{
										html += `
												<div>
													<a href="goods_detail.html?a=${v.id}">
														<div><img src="${v.img_url}" alt="" /></div>
														<aside>
															<h5 class="mui-ellipsis-2">${v.good_name}</h5>
															<p>￥${v.price}</p>
														</aside>
													</a>
												</div>`
									});
									$('.price_cate').empty().append(html)
								}else{
									$('.iconfont').removeClass('icon-fold').addClass('icon-unfold')
									price_ctl = true
									let html =''
									$.each(data, (i,v)=>{
										html += `
												<div>
													<a href="goods_detail.html?a=${v.id}">
														<div><img src="${v.img_url}" alt="" /></div>
														<aside>
															<h5 class="mui-ellipsis-2">${v.good_name}</h5>
															<p>￥${v.price}</p>
														</aside>
													</a>
												</div>`
									});
									$('.price_cate').empty().append(html)
								}
							},
							error(err){
								mui.toast('服务器繁忙')
							}
						});
						
				}
			})
			/******	   监听slider	********/
			$('.mui-slider').on('slide',e=>{
				$('.mui-segmented-control .mui-control-item').removeClass('mui-active')
				$('.mui-segmented-control .mui-control-item').eq(e.detail.slideNumber).addClass('mui-active')
			})

		</script>
	</body>

</html>